<template>
  <div class="about">
    <!-- 搜索框 -->
    <van-search
      shape="round"
      background="pink"
      placeholder="请输入搜索关键词"
      @input="kewSHow"
      v-model="value"
      show-action
      @search="onCancel"
    >
    <template #action>
        <span @click="onCancel">搜索</span>
      </template>
    </van-search>

    <!-- 热门搜索 -->
    <div class="about_box" v-show="kewshoow">
      <p>大家都在搜索</p>
      <div class="about_item_box">
        <div v-for="(item,index) in allkeylist" :key="index">{{item.productName}}</div>
      </div>
    </div>

    <!-- 最近搜索 -->
    <div class="search_box" v-show="kewshoow">
      <p>最近搜索</p>
      <div class="search_box_item">
        <div v-for="(item,index) in zuijList" :key="index" @touchmove="dele">
          <span>
            <van-icon name="clock-o" size="22px" />
          </span>
          <span>{{item}}</span>
          <span @click="dele(index)">x</span>
        </div>
      </div>
    </div>
    <!-- 关键字 -->
    <div class="key_box" v-show="!kewshoow">
      <div class="key_box_item" v-for="(item ,index) in keyList" :key="index" @click="seadrch">{{item.productName}}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      kewshoow: true,
      value: ""
    };
  },
  computed: {
    // 关键字
    keyList() {
      return this.$store.state.keyList;
    },
    // 全部数据
    allkeylist() {
      return this.$store.state.allkeylist;
    },
    // 最近搜索
    zuijList(){
      return this.$store.state.zuijList;
    }
  },
  mounted() {
    // 获取全部数据
    this.$store.dispatch("ALLKEWYLIST");
  },
  methods: {
    // input发生变化
    kewSHow() {
      this.kewshoow = this.value.length == 0;
      this.$store.dispatch('KEYLIST',this.value)
    },
    // 点击删除
    dele(index) {
       this.$store.dispatch('DELE',index)
    },
    // 回车和搜索的事件
    onCancel() {
      // console.log(123);
      // this.$store.dispatch("KEYLIST", this.value);
      this.$store.dispatch("ZUIJINLIST", this.value);
    },
    seadrch(){
      this.$store.dispatch("SEADRCH", this.value);
    }
  }
};
</script>
<style  scoped>
.about {
  background: #f4f4f4;
}
.about_box {
  width: 100%;
  /* height: 140px; */
  /* border: 1px solid red; */
  background: white;
}
.about_box > p {
  color: gray;
  margin-left: 15px;
  height: 48px;
  line-height: 48px;
}
.about_item_box {
  width: 100%;
  /* margin: 5px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* border: 1px solid red; */
}
.about_item_box > div {
  border: 1px solid #cdcdcd;
  border-radius: 20px;
  padding: 9px;
  margin: 5px;
}
.search_box {
  width: 100%;
  margin-top: 10px;
  background: white;
  /* border: 1px solid red; */
}
.search_box > p {
  color: gray;
  margin-left: 15px;
  height: 48px;
  line-height: 48px;
}
.search_box_item {
  /* border: 1px solid red; */
  display: flex;
  flex-wrap: wrap;
}
.search_box_item > div {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  border-bottom: 1px solid rgb(204, 204, 214);
  text-indent: 0.2rem;
}
.search_box_item > div > span:nth-child(1) {
  line-height: 50px;
  display: block;
  float: left;
}
.search_box_item > div > span:nth-child(2) {
  margin-left: 15px;
}
.search_box_item > div > span:nth-child(3) {
  position: absolute;
  right: 25px;
}
.key_box {
  width: 100%;
  background: white;
  /* background: darkcyan; */
  position: absolute;
  top: 54px;
}
.key_box_item {
  width: 100%;
  height: 45px;
  text-align: center;
  line-height: 45px;
  border: 1px solid red;
}
</style>
